<template>
	<Modal :title="title" v-model="visible" width="920" :footer-hide="true" @on-cancel="visible = false">
		<Card>		
			<h2>商品信息</h2>
			<div>订单编号：{{form.orderNum}}</div>
			<div>抽奖商品名称：{{form.drawProductName}}</div>
			<div>抽奖商品图片：</div>
			<img :src="form.drawProductPic" alt="" style="width: 200px;height: 200px;">
			<div>支付金额：{{form.payMoney}}元</div>
			<div>支付状态：{{form.payStatus === 0 ? '待支付' : form.payStatus === 1 ? '已支付' : '支付失败'}}</div>
			<div>订单状态：{{form.orderStatus === 0 ? '未完成' : '已完成'}}</div>
			<Divider />
			<h2>个人信息</h2>
			<div>收货人：{{form.consignee === null || form.consignee === '' ? '--' : form.consignee}}</div>
			<div>联系方式：{{form.phone === null || form.phone === '' ? '--' : form.phone}}</div>
			<div>详细地址：{{form.addressDetail === null || form.addressDetail === '' ? '--' : form.addressDetail}}</div>
		</Card>
	</Modal>
</template>

<script>
import { getOrderDetail } from '@/api/index';
export default {
	name: 'post',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object
		}
	},
	data() {
		return {
			visible: this.value,
			title: '',
			submitLoading: false,
			maxHeight: 510,
			form: {},
			pic: ''
		};
	},
	methods: {
		setCurrentValue(value) {
			// console.log(this.form)
			if (value === this.visible) {
				return;
			}
			this.title = '详情';
			// 回显
			getOrderDetail({id: this.data.orderId}).then(res => {
				if (res.success) {
					this.form = res.result;
				} else {
					this.form = {}
				}
			})
			this.visible = value;
		}
	},
	watch: {
		value(val) {
			this.setCurrentValue(val);
		},
		visible(value) {
			this.$emit('input', value);
		}
	},
	mounted() {
		// this.init();
	}
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
